<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p class="one">{{num}}</p>
        <div>{{num}}</div>
        <p>{{number}}</p>
        <h1>{{msg}}</h1>
        <h5>{{str}}</h5>
        <section>
            <div>{{num}}</div>
        </section>
        <button @click="add">++</button>
    </div>
</body>
<script>
    // 生命函数 obj是形参
 function Vue(obj){
    console.log(obj);
    // console.log(this);
    // this.el.innerHTML = `<p>${obj.data.num}</p>`
    this.el = document.querySelector(obj.el)
    this.num = obj.data.num
    // console.log(this.el.children);
    // console.log(this.el.children()); //获取到#app下面的子节点
    for(var i=0;i<this.el.children.length;i++){
    //    console.log(this.el.children[i].innerHTML); 
       let txt = this.el.children[i].innerHTML //每一个节点的内容
       if(txt.includes("{{")){
        // console.log(this.el.children[i].innerHTML);
        // console.log(this.el.children[i].innerHTML.split('{{')[1].split('}}')[0]);//获取到{{}}里面的变量
        let domTxt = this.el.children[i].innerHTML.split('{{')[1].split('}}')[0]
        console.log(domTxt);
        this.el.children[i].innerHTML = obj.data[domTxt]

       }
       let methodFn = this.el.children[i].getAttribute('@click')
       
       if(methodFn){
        console.log(methodFn);
        //   标签上代@click属性 可以点击
          console.log( this.el.children[i]);
          this.el.children[i].onclick = obj.methods[methodFn].bind(this)
       }
      


    }
 }   

 let vm = new Vue({
    el:"#app",
    data:{
        num:10,
        number:20,
        msg:"今天是专9的第一天",
        str:'今天是搬砖的第一天'
    },
    methods: {
        add(){
            console.log(this);
            console.log('11111');
            let p = document.querySelector('.one')
            this.num++
            p.innerHTML = this.num


        },
        fn(){

        }
    },
 })
 console.log(vm);


 let  obj = {
    name:'zs',
    age:18,
    sex:'男'
 }
 for(var i in obj){
    // console.log(i);
    console.log(obj[i]);
 }
</script>
</html>